<template>
  <div class="box">
    <div class="header">
      <h3><icon name="arrow-left" @click="fanhui"/>返回</h3>
      <h3>历史浏览</h3>
      <h3 @click="deleteHistoryHandel">清空</h3>
    </div>
    <div class="nav">
      <div class="item" @click="tiaoHandel(item.id)" v-for="item in goods"  :key="item.id" >
        <img :src="item.imgs" :alt="item.name">
        <span>￥{{item.goodsPrice}}</span>
      </div>  
    </div>

</div>
</template>
<script setup>
import { Icon ,Dialog } from 'vant';
import { ref } from "vue";
import{dalImg}from '../utils/tools'
import{useRouter}from "vue-router"
import{watchhistoryAPI,deletehistoryAPI}from '../services/shop'
const goods=ref("")
const router = useRouter();
const fanhui=()=>{
  router.go(-1)
}
watchhistoryAPI().then((res) => {
 goods.value=res.data;
}); 



const deleteHistoryHandel=()=>{
  Dialog.confirm({
  title: '',
  message:
    '是否确认删除所有浏览记录',
})
  .then(() => { 
  deletehistoryAPI().then((res)=>{
    console.log(res)
    watchhistoryAPI().then((zs) => {
    goods.value =zs.data;
});
  })
  })
  .catch(() => {
    // on cancel
  });
}
  const tiaoHandel=(id)=>{
     router.push({
    name: "Pdetail",
    query: {
      id,
    },
  }); 
}

</script>

<style scoped>
.box{
  display: flex;
  flex-direction: column;
}
.header{
  display: flex;
  justify-content:space-between ;
  padding: 10px;
  height: 6%;
}
.nav{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 10px;
  background-color: rgba(237, 235, 235, 0.411);
  align-content: flex-start;
  justify-content: space-between;

}
.nav::after{
  content: "";
  width: 32%;
}
.item{
  width: 32%;
  height: 150px;
  border-radius: 5px;
  background-color: white;
  margin-bottom: 10px;

}
.item img{
  height:110px;
  width:110px;
  display:block;
  margin:0 auto;
  border-radius: 5px 5px 0 0 ;
}
.item span{
  display:block;
 color: red;
 margin-top:10px
}
 
</style>